<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        /*
        // JS的DOM构建
        var divDom = document.createElement("div");
        divDom.id = "app";
        divDom.title = "div元素";
        var p1Dom = document.createElement("p");
        p1Dom.id = "pdom1";
        var p2Dom = document.createElement("p");
        p2Dom.id = "pdom2";
        var txt = document.createTextNode("hahahha")
        p2Dom.appendChild(txt);
        divDom.appendChild(p1Dom);
        divDom.appendChild(p2Dom);
        console.log(divDom)
        window.onload = function(){
            document.body.appendChild(divDom);
        }
        */

        // js 对象通过固定解构可以被特定方法转换DOM结构的数据对象，叫做虚拟DOM
        var  obj = {
            tagName:"div",
            attribute:{
                attrs:{
                    id:"app",
                    title:"div元素"
                }
            },
            children:[
                {
                    tagName:"p",
                    attribute:{
                        attrs:{
                            id:"pdom1"
                        }
                    },
                },
                {
                    tagName:"p",
                    attriibute:{
                        attrs:{
                            id:"pdom2"
                        }
                    },
                    children:[
                        {
                            tagName:"span",
                            attrs:{
                                id:"span1"
                            }
                        },
                        {
                            tagName:"span2",
                            attrs:{
                                id:"span2"
                            },
                            children:[
                                {
                                    tagName:"span3"
                                },
                                {
                                    tagName:"span4"
                                }
                            ]
                        }
                    ]
                }
            ]
        }

        function createElemet(obj){
            // 使用递归的定义方式实现元素创建
            let rootDom = document.createElement(obj.tagName);
            if(obj.attribute){
                if(obj.attribute.attrs){
                    for (let key in obj.attribute.attrs) {
                       rootDom[key] = obj.attribute.attrs[key];
                    }
                }
            }
            if(obj.children&&obj.children instanceof Array){
                for (let i = 0; i < obj.children.length; i++) {
                    // obj.children[i]
                    let tempDom = createElemet(obj.children[i]);
                    rootDom.appendChild(tempDom);
                }
            }
            return rootDom;

        }
        console.log(createElemet(obj));
    </script>
</head>
<body>
    
</body>
</html>